/**
* @Author: 858834013@qq.com
* @Name: progressBar
* @Date:2023年10月27日10:47:49
* @Desc: 进度条效果
*/
<template>
  <div class="progressBar" ref="progressBarInner">
    <div class="progressBarInner"
         :class="'progressBarInner'+index">
    </div>
    <span :style="{ color: item.color }">   {{ item.num }}</span> <!-- value的颜色 -->
    <p :style="{ color: item.color }">{{ calculatePercentage(item.num) }}%</p> <!-- 百分比的颜色 -->
  </div>
</template>

<script>
import gsap from "gsap";

export default {
  name: "progressBarBody",
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    index: {
      type: Number,
      default() {
        return 0
      }
    },
    total: {
      type: Number,
      default() {
        return 0
      }
    },
  },
  computed: {
    width: function () {
      return (this.item.num / this.total).toFixed(2) * 100
    },
  },
  data() {
    return {}
  },
  watch: {
    width() {
      setTimeout(() => {
        gsap.to(this.$refs.progressBarInner, {
          duration: 1.5, width: this.width + '%', onComplete: () => {
            console.log('动画完成')
          }
        })
      }, 500)
    },
  },
  mounted() {
    setTimeout(() => {
      gsap.to(this.$refs.progressBarInner, {
        duration: 1.5, width: this.width + '%', onComplete: () => {
          console.log('动画完成')
        }
      })
    }, 500)
  },
  methods: {
    calculatePercentage(value) {

      return ((value / this.total) * 100).toFixed(1); // 保留两位小数
    }
  },
}
</script>

<style lang="less" scoped>
.progressBar {
  width: 0%;
  height: 16px;
  //background: rgba(0, 144, 255, 0.1);
  background-size: 100% 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  position: relative;

  .progressBarInner {
    height: 16px;
    background: linear-gradient(270deg, #1266FF 0%, rgba(18, 101, 255, 0.07) 100%);
    display: flex;
    min-width: 30px;

    overflow: hidden;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    opacity: 1;
    margin-left: 3px;
    width: calc(100% - 70px);
    border-radius: 100px 50PX 50PX 100px;
  }

  .progressBarInner0 {
    background-image: url('./assets/jindu1/01.png'),
    url('./assets/jindu1/02.png'),
    url('./assets/jindu1/03.png');
    background-repeat: no-repeat,
    no-repeat,
    no-repeat;
    background-position: top left,
    3px top,
    right top;
    background-size: 3px 15px,
    calc(100% - 3px - 6px) 15px,
    6px 15px;
  }

  .progressBarInner1 {
    background-image: url('./assets/jindu4/01.png'),
    url('./assets/jindu4/02.png'),
    url('./assets/jindu4/03.png');
    background-repeat: no-repeat,
    no-repeat,
    no-repeat;
    background-position: top left,
    3px top,
    right top;
    background-size: 3px 15px,
    calc(100% - 3px - 6px) 15px,
    6px 15px;
  }

  .progressBarInner2 {
    background-image: url('./assets/jindu2/01.png'),
    url('./assets/jindu2/02.png'),
    url('./assets/jindu2/03.png');
    background-repeat: no-repeat,
    no-repeat,
    no-repeat;
    background-position: top left,
    3px top,
    right top;
    background-size: 3px 15px,
    calc(100% - 3px - 6px) 15px,
    6px 15px;
  }

  .progressBarInner3 {
    background-image: url('./assets/jindu5/01.png'),
    url('./assets/jindu5/02.png'),
    url('./assets/jindu5/03.png');
    background-repeat: no-repeat,
    no-repeat,
    no-repeat;
    background-position: top left,
    3px top,
    right top;
    background-size: 3px 15px,
    calc(100% - 3px - 6px) 15px,
    6px 15px;
  }

  .progressBarInner4 {
    background-image: url('./assets/jindu3/01.png'),
    url('./assets/jindu3/02.png'),
    url('./assets/jindu3/03.png');
    background-repeat: no-repeat,
    no-repeat,
    no-repeat;
    background-position: top left,
    3px top,
    right top;
    background-size: 3px 15px,
    calc(100% - 3px - 6px) 15px,
    6px 15px;
  }

  .num {
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    margin-right: 8px;
    opacity: 0;
  }

  span {
    font-size: 16px;
    font-family: DIN-Bold;
    font-weight: bold;
    color: #31F15E;
    margin-left: 10px;
  }

  p {
    font-size: 16px;
    font-family: DIN-Bold;
    font-weight: bold;
    color: #31F15E;
    margin-left: 10px;
  }
}

</style>
